<template>
	<!--有数据的页面-->
	<view v-if="dataFlag=='hasData'" class="goods-page">
		<navigator class="" v-for="(item,index) in goodsList" :key="index" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
			<my-goods :goods="item"></my-goods>
		</navigator>
		<view class="no-more-data" v-if="over">没有更多的数据了...</view>
	</view>
	<!-- 没有数据的页面 -->
	<view class="goods-list-none-data" v-else-if="dataFlag=='noData'">
		<uni-icons type="map-pin-ellipse" size="30"></uni-icons>
		啊哦~没有数据哦！
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 传参
				query:{
					query: '',
					cid: '',
					pagenum:1, 		// 第几页
					pagesize:10,  // 每页加载个数
				},
				total: 0,
				goodsList:[],    // 商品列表
				dataFlag: '',    // 判断有没有数据
				over: false, 		// 判断数据是否加载完了没有更多的页数了
				loading: false,		// 添加防抖
				
			};
		},
		
		onLoad(options){
			// console.log(options)
			this.query.query = options.query||'';
			this.query.cid = options.cid||'';
			// this.query.cid = '并且';
			this.getGoodsList()
		},
		// vue3移除了过滤器
		/* filters:{
			count(num){
				return Number(num).toFixed(2)
			}
		}, */
		methods:{
			// 获取商品列表数据
			async getGoodsList(cb){
				this.loading = false
				const {data:res} =await uni.$http.get(uni.api.SEARCH,this.query);
				// console.log('res',res)
				this.loading = true
				if(res.meta.status!== 200){
					this.dataFlag = 'noData'
					uni.$showMsg();
					return 
				} 
				this.goodsList = [...this.goodsList,...res.message.goods];
				this.total = res.message.total;
				if(this.goodsList.length>0){
					this.dataFlag = 'hasData'
				}else{
					this.dataFlag = 'noData'
				}
				cb && cb()
			}
		},
		// 上拉刷线
		onPullDownRefresh(){
			this.query.pagenum = 1;
			this.goodsList=[];
			this.over = false;
			this.getGoodsList(function(){
				uni.stopPullDownRefresh()
			})
		},
		// 下拉加载更多
		onReachBottom(){
			// console.log('上拉加载更多')
			if(!this.loading)return
			// 数据已经加载完了
			if(this.query.pagenum * this.query.pagesize >= this.total){
				this.over = true
				return
			}
			this.query.pagenum++;
			this.getGoodsList()
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	/* 有数据的页面 */
.goods-page{
	// background-color: #fff;
	padding: 5px;
	

	.no-more-data{
		text-align: center;
		font-size: 12px;
		padding: 10rpx 0;
	}
}
	/* 没有数据的页面 */
.goods-list-none-data{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 26px;
}
</style>
